PR 요약

다단계 폼(Multi-step Form) UI에서 step 제어 로직과 렌더링 조건이
컴포넌트 전반에 흩어지는 문제를 해결하기 위해
useMultiForm 커스텀 훅 추가

Compound Component 패턴을 사용해
폼 흐름을 선언적으로 구성할 수 있도록 설계했습니다.

문제 배경

기존의 다단계 폼 구현에서는 다음과 같은 문제가 있었습니다.

• step 상태와 조건부 렌더링 로직이 여러 컴포넌트에 분산됨
• if (step === n) 형태의 분기문이 많아 가독성이 떨어짐
• step 순서 변경이나 추가 시 수정 범위가 큼

이로 인해 유지보수성과 확장성이 저하되는 문제가 있었습니다.

💡 해결 방법 (How)

step 상태와 흐름 제어를 하나의 훅으로 캡슐화하고,
Compound Component 패턴을 활용해
JSX 레벨에서 선언적으로 step 구조를 표현하도록 개선했습니다.

🧩 설계 구조

useMultiForm

const {
  nowStep,
  handleStep,
  Step,
  MultiForm,
} = useMultiForm();

역할

• nowStep: 현재 step 상태
• handleStep: step 이동 제어 함수 (next, before)
• Step: 각 step UI를 선언적으로 정의하는 컴포넌트
• MultiForm: 현재 step에 해당하는 Step만 렌더링하는 컨테이너

<Step />

<Step step={0}>
  <JobCompanyForm />
</Step>

• 각 step의 UI를 감싸는 구조적 컴포넌트
• 렌더링 여부 판단은 하지 않음
• step 번호와 UI의 매핑을 명확하게 표현

<MultiForm />

<MultiForm>
  <Step step={0}>...</Step>
  <Step step={1}>...</Step>
</MultiForm>

• 자식으로 전달된 Step 중
• 현재 nowStep과 일치하는 Step만 선택하여 렌더링
• step 선택 로직을 한 곳에서 관리

사용 예시

function CoverLetter() {
  const { Step, MultiForm, nowStep, handleStep } = useMultiForm();

  return (
    <CoverLetterAnalysisLayout nowStep={nowStep}>
      <MultiForm>
        <Step step={0}>
          <JobCompanyForm />
        </Step>

        <Step step={1}>
          <ReportList />
        </Step>

        <Step step={2}>
          <InputQuestion />
        </Step>
      </MultiForm>

      <NavigateButton
        nowStep={nowStep}
        handleStep={handleStep}
      />
    </CoverLetterAnalysisLayout>
  );
}

기대 효과

- step 기반 UI 흐름을 JSX 구조만 봐도 이해 가능
- step 추가/삭제/순서 변경이 쉬워짐
- 렌더링 조건 로직이 훅 내부로 캡슐화됨
- 재사용 가능한 다단계 폼 패턴 제공